<template>
    <el-dialog v-model="isshow" title="修改密码" width="500" :before-close="handleClose">
        <el-form ref="pwdref" style="max-width: 600px" :model="setpwd" :rules="pwdrule">
            <el-form-item :label="title" prop="stuid">
                <el-input v-model="setpwd.stuid" />
            </el-form-item>
            <el-form-item label="旧密码" prop="oldpwd">
                <el-input v-model="setpwd.oldpwd" />
            </el-form-item>
            <el-form-item label="新密码" prop="newpwd">
                <el-input v-model="setpwd.newpwd" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="query">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref, defineProps, onUnmounted, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import { setstupwd } from '@/apis/person';
import bus from '@/utils/mitt.ts'
const isshow = ref(false)
const pwdref = ref<any>(null)
const setpwd = ref({
    oldpwd: '',
    newpwd: '',
    stuid: '',
})
const props = defineProps(['title', 'type'])
bus.on('showpwd', () => {
    isshow.value = true
})
const pwdrule = ref({
    oldpwd: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
        { min:5, max: 12, message: '6~12位', trigger: 'blur' },
    ],
    newpwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 5, max: 12, message: '6~12位', trigger: 'blur' },
    ],
    stuid: [
        { required: true, message: '请输入学号', trigger: 'blur' },
        { min: 5, max: 12, message: '6~12位', trigger: 'blur' },
    ],
})

const handleClose = () => {
    isshow.value = false
    pwdref.value.resetFields()
}
const query = () => {
    pwdref.value.validate(async (valid: any, fields: any) => {
        if (!valid) {
            console.log(valid);
            
            ElMessage({ type: 'error', message: "数据校验失败" })
        } else {
            if (props.type == 1) {
                const res = await setstupwd(setpwd.value)
                ElMessage({type:'success',message:res.data.message})
                handleClose()
            }
        }
    })
}
onMounted(() => {
    bus.on('showpwd', () => {
        isshow.value = true
    })
})
onUnmounted(() => {
    // 解绑事件
    bus.off('showpwd')
})
</script>
<style lang='scss' scoped></style>